<template>
    <div>
        <el-card style="margin: 10px 5px;height: auto;;">
            <div style="align-items: center; text-align: left; font-weight: bolder; font-size: large;">文章列表</div>
            <div style="margin:10px 0 ;">
                <span style="align-items: center; text-align: left; font-weight:larger; margin-right: 20px; ">状态:</span>
                <el-radio-group v-model="radio" @change="updateChange()">
                    <el-radio :label="2">全部</el-radio>
                    <el-radio :label="1">公开</el-radio>
                    <el-radio :label="0">私密</el-radio>
                </el-radio-group>
            </div>
            <div style="display: flex; margin: 10px 0;">
                <span>
                    <el-button type="danger" plain @click="delBatch" icon="el-icon-delete">批量删除</el-button>
                    <el-button type="primary" plain icon="el-icon-upload">批量导入</el-button>
                    <el-button type="success" plain icon="el-icon-download">批量导出</el-button>
                </span>
                <span style=" align-items: end; margin-left: auto;">
                    <el-select v-model="value" clearable filterable allow-create placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input style="width: 200px; margin: 0 10px; " placeholder="查询标题" v-model="title"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="load(1)">搜索</el-button>
                </span>
            </div>
            <el-table :data="novels" stripe border :header-cell-style="{ backgroundColor: 'aliceblue', color: '#333' }"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="序号" type="index" :index="indexMethod">
                </el-table-column>


                <el-table-column label="标题" prop="title" align="center"></el-table-column>
                <el-table-column label="文章封面" align="center">
                    <template v-slot="scope">
                        <div>
                            <el-image style="width: 150px; height: 100px; " 
                                :src="scope.row.image" :preview-src-list="[scope.row.image]" fit="cover">
                                <div slot="placeholder">
                                    加载中
                                    <span class="dot">...</span>
                                </div>
                                <div slot="error" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
                                    <i class="el-icon-picture-outline" style="font-size: xx-large;"></i>
                                </div>
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="分类" prop="type" align="center"></el-table-column>
                <el-table-column label="内容" prop="content" align="center">
                    <template v-slot="scope">
                        <el-button type="primary" @click="showContent(scope.row.content)">显示内容</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="发表时间" prop="time" align="center"></el-table-column>
                <el-table-column label="推荐" prop="recommend" align="center">
                    <template v-slot="scope">
                        <el-switch v-model="scope.row.recommend" active-color="#13ce66" @change="change($event,scope.row)" inactive-color="gray">
                        </el-switch>
                    </template>
                   
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="scope">
                        <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px 0;">
                <el-pagination background layout="total,sizes, prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2" :page-sizes="[5, 10, 20]" :page-size="pageSize">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="文章内容" :visible.sync="dialogVisible1" width="70%">
            <div class="w-e-text">
                <v-md-preview :text="content" ref="articleContent"  @copy-code-success="handleCopyCodeSuccess"></v-md-preview>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible1= false ">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
    export default{
        data(){
            return{
                radio:2,
                editor: null,
                novels:[],
                title:'',
                type:'',
                total:'',
                pageSize:10,
                pageNum:1,
                form:{},
                dialogVisible:false,
                user:JSON.parse(localStorage.getItem('user'||'{}')),
                ids:[],
                content:'',
                dialogVisible1:false,
                
            options: [{
                value: '选项1',
                label: '类型一'
            }, {
                value: '选项2',
                label: '类型二'
            }, {
                value: '选项3',
                label: '类型三'
            },],
            value: ''
            }
        },
        created() {
            this.load()
        },
        methods:{
           
            updateChange(){
                this.load(1);
            },
            change(event,row){
                this.$request.put('/novel/update',row).then(res=>{
                    if(res.code=='1'){
                        this.$message.success("修改成功")
                    }
                    else{
                        this.$message.error("res.msg")
                    }

                })
            },
            handleCopyCodeSuccess(code) {
                console.log(code);
            },
            indexMethod(index) {
                return (this.pageNum - 1) * this.pageSize + index + 1;
            },

            showContent(content){
                this.content=content
                this.dialogVisible1=true
            },
            delBatch() {
                if (!this.ids.length) {
                    this.$message.warning('请选择数据')
                    return
                }
                this.$confirm('您确认删除吗', '确认', { type: "warning" }).then(response => {
                    this.$request.delete('/novel/delete', { data: this.ids }).then(res => {
                        console.log(response)
                        if (res.code == '1') {
                            this.$message.success('操作成功')
                            this.load(1)
                        } else {
                            this.$message.error(res.msg)
                        }
                    })

                }).catch(() => { })
            },
            handleSelectionChange(rows) {
                this.ids = rows.map(v => v.id)
            },
            del(id) {
                this.$confirm('您确认删除吗', '确认', { type: "warning" }).then(response => {
                    this.$request.delete('/novel/delete/' + id).then(res => {
                        console.log(response)
                        if (res.code == '1') {
                            this.$message.success('操作成功')
                            this.load(1)
                        } else {
                            this.$message.error(res.msg)
                        }
                    })

                }).catch(() => { })
            },
            handleEdit(row) {
                this.form = JSON.parse(JSON.stringify(row))
                this.$router.push({ path: '/novelContent', query:{form:JSON.stringify(this.form) } })
            },
            getEditorContent(content) {
                this.form.content = content
            },
            reset() {
                this.name = ' '
                this.username = ' '
                this.load()
            },
            load(pageNum) {
                if (pageNum) this.pageNum = pageNum
                this.$request.get('/novel/selectByPage', {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        title: this.title,
                        type: this.value,
                        permission:this.radio,
                    }
                }).then(res => {
                    this.novels = res.data.records
                    this.total = res.data.total
                })
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum
                this.load(pageNum)
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.load()
            },

        }
    }

    
</script>

<style>
  .el-upload-dragger img{
    max-width: 100%;
    max-height: 100%;
  }
  
</style>